<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-resource.js"></script>
</head>

<body>
    <div id="box">
        <button @click="search()">search</button>
        <!-- 
            1.get请求
            this.$http.get("url",{params:{a:1,a:2...}})
            .then(function(res){处理请求成功},function(res){处理请求失败});
         -->
    </div>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {

            },
            methods: {
                search() {
                    // 1. 请求文本
                    this.$http.get('a.txt').then(function (res) {
                        // console.log("成功");
                        // res参数;请求成功时返回的数据
                        // 返回的参数中，status 是请求的状态码
                        // data:请求返回的数据
                        console.log(res.status);
                        console.log(res.data);
                    }, function (res) {
                        console.log(res.status);
                    });

                    // 2. 需要向后台传递参数，并返回数值
                    // 需求：向后台传入两个数，返回两个数的和
                    this.$http.get('sum.php', {
                        params: { a: 3, b: 10 }
                    }).then(function (res) {
                        console.log(res.data);
                    }, function (res) {
                        console.log(res.status);
                    })

                    // post请求
                    // this.$http.post('url',{a:1,b:2...},{emulateJSON:true}).then(function(res){处理请求成功的情况},
                    // function(res){处理请求失败});

                    // 参数传递：{参数1：值1，参数2：值2.....}
                    // {emulateJSON:true} 模拟json数据格式，将参数传递过去
                    // 求两个数的差
                    this.$http.post('sub.php', {
                        a: 5, b: 1
                    }, { emulateJSON: true }).then(function (res) {
                        console.log(res.data);
                    }, function (res) {
                        console.log(res.status);
                    })

                    // jsonp请求
                    // this.$http.jsonp('url',{params:{a:1,b:2...}},
                    // {emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况})

                    // get,参数拼接url上，一般保密性的信息不要使用这种方法，对文件大小限制
                    // post,允许传递数据大小 大

                }
            }
        })
    </script>
</body>

</html>